<template>
	<view class="content">
		<back-fixed title="信息登记"></back-fixed>
		<view class="notice">
			<view style="padding: 24rpx;">
				录入信息仅供医生更全面的了解您的情况，为您提供更精准的服务
			</view>
		</view>
		<view class="box">
			<u-field v-model="form.name" label="姓名" input-align="right" placeholder="输入姓名" :border-bottom="true"
				placeholder-style="color: #C1C1C1;"></u-field>
			<u-field v-model="form.phoneNumber" label="手机号码" input-align="right" placeholder="输入手机号"
				:border-bottom="true" placeholder-style="color: #C1C1C1;"></u-field>
			<u-field v-model="sex" @click="showAction" input-align="right" :disabled="true" label="性别"
				placeholder="选择性别" right-icon="arrow-right" :border-bottom="true" placeholder-style="color: #C1C1C1;">
			</u-field>
			<u-field v-model="form.date" label="出生日期" input-align="right" placeholder="出生日期" :border-bottom="true"
				placeholder-style="color: #C1C1C1;"></u-field>
			<!-- 	<u-field v-model="dep" @click="chusheng = true" input-align="right" :disabled="true" label="出生日期"
				placeholder="出生日期" right-icon="arrow-right" :border-bottom="true" placeholder-style="color: #C1C1C1;">
			</u-field> -->
			<u-field v-model="form.menzhen" label="门诊号" input-align="right" placeholder="门诊号" :border-bottom="true"
				placeholder-style="color: #C1C1C1;"></u-field>
			<u-field v-model="form.juzhu" label="居住地" input-align="right" placeholder="居住地" :border-bottom="true"
				placeholder-style="color: #C1C1C1;"></u-field>
			<u-field v-model="form.details" label="详细地址" input-align="right" placeholder="详细地址" :border-bottom="true"
				placeholder-style="color: #C1C1C1;"></u-field>
			<!-- <u-field v-model="dep" @click="keshi = true" input-align="right" :disabled="true" label="科室"
				placeholder="选择科室" right-icon="arrow-right" :border-bottom="true" placeholder-style="color: #C1C1C1;">
			</u-field>
			<u-field v-model="job" @click="zhicheng = true" input-align="right" :disabled="true" label="职称"
				placeholder="选择职称" right-icon="arrow-right" :border-bottom="true" placeholder-style="color: #C1C1C1;">
			</u-field> -->
			<!-- 性别下拉菜单 -->
			<u-select v-model="show" :list="list" @confirm="SexConfirm" confirm-color="#4DC0D9"
				:safe-area-inset-bottom="true"></u-select>
			<u-select v-model="chusheng" :list="depList" @confirm="chushengConfirm" confirm-color="#4DC0D9"
				:safe-area-inset-bottom="true"></u-select>
			<u-select v-model="zhicheng" :list="JobList" @confirm="JobConfirm" confirm-color="#4DC0D9"
				:safe-area-inset-bottom="true"></u-select>
			<view class="login_button" @click="toUser">
				<view class="login_but_style" v-if="!actives">
					提交
				</view>
				<view class="login_but_style active" v-if="actives">
					提交
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		zhicheng,
		userInfoPost,
		getDepList,
		getInfo
	} from '@/api/index.js'
	import {
		baseURL
	} from '@/config/app'
	export default {
		data() {
			return {
				placeholder: '"color": "red"',
				form: {
					name: '',
					phoneNumber: '',
					menzhen: '', //门诊号
					juzhu: '', //居住地
					details: '', //详细地址
					sex: '',
					date: '', //出生日期
					// dep: '', //科室
					// job: '', //职称
				},
				sex: '',
				dep: '', //科室
				job: '', //职称
				depList: [{
						value: '1',
						label: '精神科'
					},
					{
						value: '2',
						label: '耳鼻喉'
					},
					{
						value: '3',
						label: '眼科'
					}
				],
				JobList: [
					// {
					// 	value: '1',
					// 	label: '主任医师'
					// },
					// {
					// 	value: '2',
					// 	label: '副主任医师'
					// },
					// {
					// 	value: '3',
					// 	label: '住院医师'
					// }
				],
				list: [{
						value: '0',
						label: '男'
					},
					{
						value: '1',
						label: '女'
					},
					// {
					// 	value: '2',
					// 	label: '未知'
					// }
				],
				show: false, //性别
				chusheng: false, //科室
				zhicheng: false, //职称
				//actives:false,   //展示哪个按钮，没填暗淡，填了更绿
				filePath: '', //
				myX: require('@/static/img/myX.png')
			}
		},
		computed: {
			actives() {
				return true
			}
		},

		onLoad() {
			this.getJobList()
		},
		methods: {
			async getJobList() {
				// let that = this
				let res = await zhicheng('user_title') //职称列表
				this.JobList = res.data.map((v) => {
					return {
						value: v.dictValue,
						label: v.dictLabel
					}
				})
				//	console.log(this.JobList); 
				this.DepList() //获得科室列表
			},
			async DepList() {
				let res = await getDepList()
				this.depList = res.data.map((v) => {
					return {
						value: v.deptId,
						label: v.deptName
					}
				})
				//console.log(res,this.depList,'dep');
			},
			showAction() { //打开性别菜单
				this.show = true;
			},
			SexConfirm(e) {
				//console.log(e);
				this.sex = e[0].label //性别显示
				this.form.sex = e[0].value
				//	console.log(e);
			},
			chushengConfirm(e) {
				this.dep = e[0].label //科室显示
				this.form.dep = e[0].value
				//console.log(e);
			},
			JobConfirm(e) {
				this.job = e[0].label //职称显示
				this.form.job = e[0].value
				//console.log(e);
			},
			isPass() {
				if (this.form.name.length < 1) {
					this.$u.toast('请填写姓名')
					return false
				}
				if (this.form.sex.length < 1) {
					this.$u.toast('请选择性别')
					return false
				}
				if (this.form.dep.length < 1) {
					this.$u.toast('请选择科室')
					return false
				}
				if (this.form.job.length < 1) {
					this.$u.toast('请选择职称')
					return false
				}
				return true
			},
			async toUser() {
				uni.navigateTo({
					url: '/pages/patient/succ'
				})
				return

				if (!this.isPass()) return
				let params = {
					'deptId': this.form.dep,
					'nickName': this.form.name,
					'sex': this.form.sex,
					'userTitle': this.form.job,
				}
				//console.log(params);
				//return
				let res = await userInfoPost(params)
				if (res.code == 200) {
					uni.redirectTo({
						url: '/pages/index/index?to=2'
					})
				}
				//
			},
			close() {
				uni.redirectTo({
					url: '/pages/index/index?to=2'
				})
			}
			// clickItem(index) {
			// 	this.sex = this.sexList[index].text;
			// }
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-field__input-wrap {
		color: #333;
	}

	::v-deep .u-required::before {
		left: -26rpx !important;
	}

	::v-deep .u-label-text {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #212121;
		line-height: 38rpx;
	}

	.content {
		background-color: #F8F8F8;

		.myX {
			padding-top: 110rpx;
			padding-left: 48rpx;
			display: flex;
			background-color: white;
			padding-bottom: 22rpx;

			.Xtitle {
				padding-left: 180rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
				line-height: 38rpx;
			}
		}

		.notice {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #4DC0D9;
			background-color: #F1FFF9;
			line-height: 33rpx;
			padding-top: 180rpx;
			//margin-top: 180rpx;
		}

		.box {
			background-color: white;

			//margin-top: 20rpx;
			padding-left: 24rpx;

			.hosp_sp {
				display: flex;
				justify-content: space-between;
				padding: 20rpx 28rpx 20rpx 0;
				border-bottom: 1px solid #F8F8F8;

				.hosp_sp_left {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #212121;
					line-height: 38rpx;
				}

				.hosp_sp_right {
					color: #C1C1C1;
					line-height: 28rpx;
				}
			}

			.login_button {
				margin-top: 80rpx;
				padding-right: 24rpx;

				.login_but_style {
					width: 100%;
					height: 84rpx;
					background: #A6DFEC;
					border-radius: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: white;
				}
			}

			.active {
				background-color: #4DC0D9 !important;
			}
		}
	}

	.wrap {
		padding: 40rpx;
	}

	.u-avatar-wrap {
		margin-top: 80rpx;
		overflow: hidden;
		margin-bottom: 80rpx;
		text-align: center;
	}

	.u-avatar-demo {
		width: 150rpx;
		height: 150rpx;
		border-radius: 100rpx;
	}
</style>